<template>
    <div class="system-management">
      <h1>系统管理</h1>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>用户管理</span>
          </div>
        </template>
        <el-table :data="users" style="width: 100%">
          <el-table-column prop="username" label="用户名" width="180"></el-table-column>
          <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
          <el-table-column prop="role" label="角色" width="180"></el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="{ row }">
              <el-button size="small" @click="handleEditUser(row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDeleteUser(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>权限设置</span>
          </div>
        </template>
        <el-form :model="permissions" label-width="100px">
          <el-form-item label="读取权限">
            <el-switch v-model="permissions.read"></el-switch>
          </el-form-item>
          <el-form-item label="写入权限">
            <el-switch v-model="permissions.write"></el-switch>
          </el-form-item>
          <el-form-item label="管理权限">
            <el-switch v-model="permissions.admin"></el-switch>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>系统日志</span>
          </div>
        </template>
        <el-table :data="logs" style="width: 100%">
          <el-table-column prop="timestamp" label="时间戳" width="180"></el-table-column>
          <el-table-column prop="level" label="级别" width="180"></el-table-column>
          <el-table-column prop="message" label="消息" width="180"></el-table-column>
        </el-table>
      </el-card>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue';
  
  interface User {
    id: number;
    username: string;
    email: string;
    role: string;
  }
  
  interface Permissions {
    read: boolean;
    write: boolean;
    admin: boolean;
  }
  
  interface Log {
    id: number;
    timestamp: string;
    level: string;
    message: string;
  }
  
  const users = ref<Array<User>>([]);
  const permissions = ref<Permissions>({
    read: true,
    write: true,
    admin: false,
  });
  const logs = ref<Array<Log>>([]);
  
  const fetchUsers = async () => {
    // 模拟从服务器获取用户数据
    await new Promise(resolve => setTimeout(resolve, 2000));
    users.value = [
      { id: 1, username: 'admin', email: 'admin@example.com', role: 'Admin' },
      { id: 2, username: 'user1', email: 'user1@example.com', role: 'User' },
      { id: 3, username: 'user2', email: 'user2@example.com', role: 'User' },
    ];
  };
  
  const fetchLogs = async () => {
    // 模拟从服务器获取日志数据
    await new Promise(resolve => setTimeout(resolve, 2000));
    logs.value = [
      { id: 1, timestamp: '2024-08-26 10:00:00', level: 'INFO', message: 'System started.' },
      { id: 2, timestamp: '2024-08-26 10:05:00', level: 'WARNING', message: 'Disk space low.' },
      { id: 3, timestamp: '2024-08-26 10:10:00', level: 'ERROR', message: 'Connection failed.' },
    ];
  };
  
  const handleEditUser = (user: User) => {
    alert(`编辑用户: ${user.username}`);
    // 这里可以弹出编辑用户的模态框
  };
  
  const handleDeleteUser = (user: User) => {
    alert(`删除用户: ${user.username}`);
    // 这里可以调用 API 删除对应的用户
  };
  
  onMounted(() => {
    fetchUsers();
    fetchLogs();
  });
  </script>
  
  <style scoped>
  .system-management {
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */
    gap: 20px;
    padding: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  </style>